import { createRouter, createWebHistory } from 'vue-router';
import { mainStore } from '../store';
import { storeToRefs } from "pinia";


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: 'login'
    },
    {
      path: '/index',
      redirect: '/index/dashboard'
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/Login/index.vue'),
    },
    {
      path: '/index',
      name: 'index',
      component: () => import('@/layout/index.vue'),
      children: [
        {
          path: '/index/dashboard',
          name: 'dashboard',
          component: () => import('@/views/Dashboard/index.vue'),
        },
        {
          path: '/index/device',
          name: 'device',
          component: () => import('@/views/Device/index.vue'),
        },
        {
          path: '/index/environment',
          name: 'environment',
          component: () => import('@/views/Environment/index.vue'),
        },
        {
          path: '/index/light',
          name: 'light',
          component: () => import('@/views/light/index.vue'),
        },
        {
          path: '/index/temperature',
          name: 'temperature',
          component: () => import('@/views/temperature/index.vue'),
        },
        {
          path: '/index/grow',
          name: 'grow',
          component: () => import('@/views/Grow/index.vue'),
        },
        {
          path: '/index/soil',
          name: 'soil',
          component: () => import('@/views/Soil/index.vue'),
        },
        {
          path: '/index/water',
          name: 'water',
          component: () => import('@/views/Water/index.vue'),
        },
        {
          path: '/index/user',
          name: 'user',
          component: () => import('@/views/User/index.vue'),
        },
        {
          path: '/index/personal',
          name: 'personal',
          component: () => import('@/views/Personal/index.vue'),
        },
        {
          path: '/index/permissions',
          name: 'permissions',
          component: () => import('@/views/Permissions/index.vue'),
        },
        {
          path: '/index/prediction',
          name: 'prediction',
          component: () => import('@/views/prediction/index.vue'),
        },
      ]
    },

  ],
});


// 跳转前
router.beforeEach((to, from, next) => {
  let token = sessionStorage.getItem('token');


  if (!token && to.path !== "/login") {
    ElMessage.error('请先登录');
    next({ path: "/login" });
  }

  return next(true);



});


// 跳转后
router.afterEach((to, from) => {
  const store = mainStore();
  const { navbar, activetag, pathname } = storeToRefs(store);
  const items = JSON.parse(sessionStorage.getItem('items')) || [];
  // 判断路径是否等于login，不是则执行
  if (to.fullPath !== '/index/permissions') {
    if (to.fullPath !== '/login') {
      // 设置当前激活tag为跳转路径
      activetag.value = to.fullPath;
      pathname.value = window.location.pathname;
      // 设置标识
      let ishave = false;
      // 遍历查找navbar是否含有该路由
      navbar.value.forEach((it) => {
        if (it.route === to.fullPath) {
          ishave = true;
        }
      });
      // 如果没有则添加一个tag
      if (!ishave) {
        let data = '';
        if (to.fullPath !== '/index/personal') {

          items.forEach(it => {

            if (it.route == to.fullPath) {
              data = it;
            }
          });
        } else {
          data = { label: "个人中心", route: "/index/personal" };
        }
        navbar.value.push(data);

      }
    }
  }

});


export default router;
